import React, { HTMLAttributes } from 'react';
import { SvgIcon } from '../icon';

interface Props extends HTMLAttributes<HTMLDivElement> {
  active?: boolean;
  hover?: boolean;
  bgColor?: string;
  disabled?: boolean;
  showCheck?: boolean;
  noBorder?: boolean;
}

const GradientBox = ({
  children,
  className,
  active = false,
  hover = true,
  bgColor = 'white',
  disabled = false,
  onClick,
  showCheck = true,
  noBorder = false,
  ...props
}: Props) => {
  const hoverClass = hover ? 'hover:border-@brand-color-hover cursor-pointer' : '';

  const disabledClass = disabled ? 'cursor-not-allowed' : 'cursor-pointer';

  return (
    <div
      {...props}
      className={`relative rounded-xl ${className} ${disabled ? disabledClass : hoverClass}`}
      onClick={disabled ? undefined : onClick}
      style={
        noBorder
          ? {
            background: bgColor,
          }
          : active
            ? {
              background: `linear-gradient(${bgColor}, ${bgColor}) padding-box, linear-gradient(90deg, #1B6DFA 0%, #00D0FE 181.25%) border-box`,
              border: '2px solid transparent',
              boxShadow: '0px 8px 16px 0px #056EFF29',
            }
            : {
              border: '2px solid transparent',
              boxShadow: `inset 0 0 0 1px var(--line-2)`,
            }
      }
      onMouseEnter={(e) => {
        if (!disabled && !active && hover) {
          e.currentTarget.style.boxShadow = `inset 0 0 0 1px var(--brand-color-hover)`;
        }
      }}
      onMouseLeave={(e) => {
        if (!disabled && !active && !noBorder) {
          e.currentTarget.style.boxShadow = `inset 0 0 0 1px var(--line-2)`;
        } else {
          e.currentTarget.style.boxShadow = 'none'
        }
      }}
    >
      {children}
      {/* children内容 */}
      {/* <div
        className={`relative  z-20 rounded-xl bg-white ${contentClass} ${
          active ? 'left-[1px] top-[1px]' : 'left-[1px] top-[1px]'
        }`}
        style={{
          width: active ? 'calc(100% - 2px)' : 'calc(100% - 2px)',
          height: active ? 'calc(100% - 2px)' : 'calc(100% - 2px)',
          boxShadow: active ? '0px 8px 16px 0px #056EFF29' : '',
        }}
      >
        {children}
      </div> */}

      {/* 背景层 */}
      {/* <div
        className={`absolute left-0 top-0 z-10 h-full w-full rounded-xl ${
          active
            ? 'bg-@brand-color-gradient'
            : `bg-line-2 ${hover ? 'group-hover:bg-@brand-color' : ''}`
        } `}
      /> */}

      {disabled && (
        <div className="absolute right-0 top-0 z-30 flex rounded-bl-xl rounded-tr-lg bg-[#011B4612] px-[10px] py-[2px]">
          {/* <SvgIcon icon="checkOut" style={{ color: 'white' }} size={16} /> */}
          <div className="text-xs leading-5 text-text-3">已添加</div>
        </div>
      )}

      {/* active */}
      {active && showCheck && (
        <div className="absolute bottom-0 right-0 z-30 flex rounded-br-[8px] rounded-tl-lg bg-@brand-color-gradient px-2 py-[2px]">
          <SvgIcon icon="checkOut" style={{ color: 'white' }} size={16} />
        </div>
      )}
    </div>
  );
};

export default GradientBox;
